<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>
JS 鼠标事件---极简练习
</title>
<style>
  .puzzle {color: purple;
  text-indent: 2em;}
  span {color: gray;
  border: solid 1px;}
</style>
<script type='text/javascript'>
    function change_text(node, newtext, oldtext=""){
      // 负责业务逻辑，不要写在body中
      // 建议引用外部文件
    if (node.dataset.flag === "hiden" || node.dataset.flag === undefined){
    node.innerText = newtext // 重新设置node中的文本
    node.style = "color: blue"
    node.dataset.flag = "discover"
    }
    else {
      node.innerText = oldtext // 重新设置成原来的文本，隐藏答案
      node.dataset.flag = "hiden"
      node.style = "color: red"
  }
  }

  var text = "点击这里，查看答案" // 原来的文本
</script>
</head>
<body>
<h1>谜语</h1>

<ul>
<li>
  谜面：<div class='puzzle'>什么东西早晨用四条腿走路,中午用两条腿走路,晚上用三条腿走路?
  </div>
  谜底：<span class="answer">点击这里，查看答案</span>
</li>
<li>
  谜面：<div class='puzzle'>
  会吃没有嘴，会走没有腿，过河没有水，败了没有罪
  </div>
  谜底：<span class="answer">点击这里，查看答案</span>
</li>
<li>
  谜面：<div class='puzzle'>
  耳朵像蒲扇，身子像小山，鼻子长又长，帮人把活干
  </div>
  谜底：<span class="answer">点击这里，查看答案</span>
</li>
</ul>

<script type='text/javascript'>
  var b = document.body
  spans = b.getElementsByTagName('span')
  // <==> spans = b.getElementsByClassName('answer')

  var answers = ["人", "象棋", "大象"]
  for (let k in answers){
  spans[k].onclick = function (){
    change_text(spans[k], answers[k], text)}
  }
  </script>
</body>
</html>
